<template>
  <div class="mask" v-show="show">
    <div class="left-fill"></div>
    <div class="message-box">
        <div class="title-panel">{{title}}</div>
        <div class="content-panel">
          <slot></slot>
        </div>
        <div class="button-panel">
          <div class="confirm-button" @click="onConfirmButtonClicked">Ok</div>
          <div  v-show="!(actionType=='confirm only')" class="cancel-button" @click="onCancelButtonClicked">Cancel</div>
        </div>
    </div>
    <div class="right-fill"></div>
  </div>
</template>

<style scoped>

  @keyframes startAnimation {
    0% {transform: matrix(1,0,0,1,0,200); opacity: 0}
    100% {transform: matrix(1,0,0,1,0,0);}
  }

  .mask{
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.7);
    height: 100%;
    width: 100%;
    display: flex;
  }
  .left-fill{
    flex-grow: 1;
  }
  .right-fill{
    flex-grow: 1;
  }
  .message-box{
    animation: startAnimation 0.3s ease-out;
    align-self: center;
    width: 300px;
    background: white;
    overflow: hidden;

    border-radius: 5px;

  }
  .message-box .title-panel{
    height: 60px;
    background-color: #00B7FF;
  }
  .message-box .content-panel{
    padding: 10px 12px 10px 10px;
    max-height: 500px;
  }
  .message-box .button-panel{
    display: flex;
    font-size: 20px;
    border-top: 1px solid rgb(180,180,180);
  }
  .confirm-button,.cancel-button{
    margin: auto;
    padding: 15px 12px 10px 5px;
    width: 50%;
  }
  .confirm-button:hover,.cancel-button:hover{
    background: rgba(0,0,0,0.3);
  }
</style>

<script>

  export default{
//  	mounted: function(){
//
//    },
  	props: {
  		title: String,
      content: Object,
      actionType: String,
    },
    data: function(){
  		return {
  		  show: false,
      }
    },
    methods: {
      onConfirmButtonClicked: function(){
      	this.$emit('onConfirmButtonClicked');
      },
      onCancelButtonClicked: function(){
      	this.$emit('onCancelButtonClicked');
      },
      exportFn: function(){
      	return {
      		toggle: function(){
      			this.show = !this.show;
          }
        }
      }
    }
  }
</script>
